import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import guahao from '@/assets/svg/guahao.svg';
import MenuItem from './MenuItem';
import styles from './style.scss'

export default function MenuBlock(props) {

  const menus = [
    {
      title: '预约挂号',
      subTitle: 'Make an appointment',
      icon: guahao,
      url: '/pages/register/index/index',
      background: 'linear-gradient(326deg, rgb(255, 197, 61), rgb(255, 214, 102))',
    },
    {
      title: '缴费信息',
      subTitle: 'Payment information',
      icon: '',
      url: '/pages/payment/index/index',
      background: 'linear-gradient(326deg, #36cfc9, #5cdbd3)',
    },
    // {
    //   title: '报告查询',
    //   subTitle: 'Report queries',
    //   icon: '',
    //   url: '/pages/report/index/index',
    //   background: 'linear-gradient(326deg, #ff7a45, #ff9c6e)',
    // },
    {
      title: '费用查询',
      subTitle: 'Cost inquiry',
      icon: '',
      url: '/pages/inquiry/index/index',
      background: 'linear-gradient(326deg, #ff7a45, #ff9c6e)',
    },
  ]
  
  return (
    <View className={`flex ${styles.menus}`}>
      <View className="flex-1">
        <MenuItem {...menus[0]} />
      </View>
      <View className="flex-1 v-flex" style={{ gap: '1em' }}>
        <MenuItem {...menus[1]} />
        <MenuItem {...menus[2]} />
      </View>
    </View>
  );
}
